import React, { useEffect,useState,useRef } from 'react'
import { PullToRefresh } from 'antd-mobile'

import Navbar from '../../components/Navbar'
import List from '../../components/List'
import { BASEURL,reqNews } from '../../api'
import './index.scss'

export default function New() {

  const news = useRef()
  const [data, setData] = useState([])
  const [list, setList] = useState([])

  const refresh=()=>{
    let n=list.length
    let arr=[]
    let _arr=[...data]
    _arr.forEach((i,index)=>{
      let res={...i}
      res.id='n_'+(n+index)
      res.imgSrc=BASEURL+res.imgSrc
      arr.push(res)
    })
    setList(()=>[...list,...arr])
  }

  useEffect(()=>{
    async function getList(area){
      let res=await reqNews(area)
      let list=res.body
      setData(res.body)
      let arr=[]
      list.concat(list).concat(list).concat(list).forEach((i,index)=>{
        let res={...i}
        res.id='n_'+index
        res.imgSrc=BASEURL+res.imgSrc
        arr.push(res)
      })
      setList(arr)
    }
    if(list.length===0)getList({area:'AREA%7C88cff55c-aaa4-e2e0'})
  },[list])

  return (
    <div>
      <div className='new-navbar'>
        <Navbar title='资讯'></Navbar>
      </div>
      <PullToRefresh onRefresh={()=>refresh()} damping={60} direction='up' style={{overflow:'auto',height:'calc(100vh - 95px)'}}>
        <div className='new-list' ref={news}>
            <List list={list}></List>
        </div>
      </PullToRefresh>

    </div>
  )
}
